<template>
  <section>
    <van-sticky>
      <PageHeader title="资源管理"/>
    </van-sticky>

    <van-form @submit="onFormSubmit">
      <div class="flex flex-row flex-center bg-color-white" style="padding: 10px 16px;">
        <div class="flex flex-row flex-left text-center font-big" style="width: 90px;">
          分类
        </div>
        <div class="flex flex-row flex-left flex-1">
          <Multiselect
            v-model="formData.parent"
            placeholder="请选择分类"
            label="full_name"
            :options="resourceOptions"
            @select="onResourceOptionChange"
            @remove="onResourceOptionRemove">
            <template slot="singleLabel" slot-scope="{ option }">{{ option.full_name }}</template>
          </Multiselect>
        </div>
      </div>

      <van-field
        v-model="formData.name"
        name="name"
        label="名称"
        placeholder="请输入名称"
        :rules="[{ required: true, message: '名称不能为空' }]"
      />

      <van-field
        v-model="formData.url"
        name="url"
        label="URI"
        placeholder="请输入URI"
        :rules="[{ required: true, message: 'URI不能为空' }]"
      />
      <div class="pd10 font-common">*多个URI之间可用,分隔</div>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">
          保存
        </van-button>
      </div>
    </van-form>

  </section>
</template>

<script>
import PageHeader from "../componets/PageHeader";
import {resourceOptionsUri, resourceSubmitUri} from "../../common/api";
import Multiselect from "vue-multiselect";
import 'vue-multiselect/dist/vue-multiselect.min.css';

export default {
  components: {
    PageHeader,
    Multiselect
  },
  data() {
    return {
      resourceOptions: [],
      formData: {id: 0, parent_id: 0, parent: null, name: '', url: '', sort_order: 255}
    }
  },
  methods: {
    onFormSubmit(values) {
      const that = this;
      that.$http.post(resourceSubmitUri, that.formData, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.$toast.fail(msg);
        } else {
          that.$toast.success('保存成功');
          that.$router.back();
        }
      }, response => {
        that.$toast.fail('发生错误');
      })
    },
    getResourceOptions() {
      const that = this;
      this.$http.get(resourceOptionsUri).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.$toast.fail(msg);
        } else {
          for (let i = 0; i < data.length; i++) {
            let fullName = '';
            for (let j = 0; j < data[i].layer - 1; j++) {
              fullName += '|-';
            }
            fullName += data[i].name;
            data[i]['full_name'] = fullName;
          }
          that.resourceOptions = data;
        }
      }, response => {
        // error callback
      })
    },
    onResourceOptionChange(value) {
      console.log(value.id);
      this.formData.parent_id = value.id;
    },
    onResourceOptionRemove(value) {
      if(value.id == this.formData.parent_id) {
        this.formData.parent_id = 0;
      }
    },
  },
  mounted: function () {
    this.getResourceOptions();
  }
}
</script>

<style scoped>

</style>
